<script setup lang="ts">
defineOptions({
  name: "FULLSCREEN_GAS_OPERATION_OVERVIEW_PID_SPECIFICGAS_CHLORINE"
});

// pid 气化科 CL2 供应系统 弹框

// path  /fullScreen/gas/operation/topology/specificGas/chlorine?pidCode=xxxx&pointName=xxxxxxxx

import { ref, defineAsyncComponent } from "vue";
import { queryPointCurveByPoint } from "@/api/modules/operation";
import searchGas from "../components/searchGas.vue";

const echartsCom = defineAsyncComponent(() => import("@/views/common/components/echartsCom/index.vue"));

const popup_width = ref<string>("980px");
const popup_height = ref<string>("600px");
const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);
const echartsOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const searchGasLoading = ref<boolean>(false);
const loading = ref<boolean>(false);

const searchChangeHandler = async (params: Record<string, any>, flag: boolean = false) => {
  loading.value = true;
  const list = await queryPointCurveByPoint(params, () => {
    loading.value = false;
  });
  initEcharts(list);
  !flag && echartsComRef.value.updateOption(true);
  loading.value = false;
};

const getEchartsSeries = (list: Array<any>) => {
  return list.map((item, index) => {
    const { specName, specValueCurve } = item;
    const name = specName;
    const type = "line";
    const symbol = "none";
    const showSymbol = false;
    const yAxisIndex = index;
    const data = specValueCurve.map(item => item.num);
    return { name, type, symbol, showSymbol, data, yAxisIndex };
  });
};

const initEcharts = (list: Array<any>) => {
  if (!list?.length) {
    echartsOptions.value = null;
    return;
  }
  const xAxisData = list[0].specValueCurve.map(item => item.name);
  const grid = {
    top: 46,
    bottom: 12,
    left: 24,
    right: 24,
    containLabel: true
  };
  const xAxis = {
    type: "category",
    data: xAxisData
  };
  const yAxis = list.map((item, index) => {
    const { unit } = item;
    const position = index === 0 ? "left" : "right";
    const name = unit;
    const type = "value";
    const splitLine = {
      show: true,
      lineStyle: {
        type: "dashed"
      }
    };

    return { position, name, type, splitLine };
  });
  const legend = {
    show: true
  };
  const tooltip = {
    show: true,
    trigger: "axis"
  };
  const series = getEchartsSeries(list);
  echartsOptions.value = { grid, xAxis, yAxis, legend, tooltip, series };
};
</script>

<template>
  <div class="topology-common-popup-base">
    <div v-loading="searchGasLoading" class="common-popup-content-content">
      <div class="content-search">
        <searchGas v-model:loading="searchGasLoading" @change="searchChangeHandler" />
      </div>
      <div v-loading="loading" class="content-echarts">
        <echartsCom ref="echartsComRef" :options="echartsOptions" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.topology-common-popup-base {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;

  .common-popup-content-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    // width: v-bind(popup_width);
    // height: v-bind(popup_height);
    padding: 16px;

    .content-title {
      width: 100%;
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 600;
      color: #333;
      letter-spacing: 2px;
    }

    .content-search {
      width: 100%;
      margin-bottom: 12px;
    }

    .content-echarts {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      // flex: 1;
      height: 400px;
    }
  }
}
</style>
